{% extends 'base.html' %}

{% block title %}添加用户{% endblock %}

{% block content %}
<div class="row">
    <!-- 侧边栏（复用用户管理的侧边栏） -->
    <div class="col-md-3 col-lg-2 sidebar p-3">
        {% include 'sidebar.html' %} <!-- 假设侧边栏模板为sidebar.html -->
    </div>

    <!-- 内容区域 -->
    <div class="col-md-9 col-lg-10 p-4">
        <h3 class="mb-4">添加用户</h3>

        <form method="post" class="needs-validation" novalidate>
            {% csrf_token %}
            <div class="row g-3">
                <!-- 用户名 -->
                <div class="col-md-6">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="username" name="username" required>
                    <div class="invalid-feedback">请输入用户名</div>
                </div>

                <!-- 邮箱 -->
                <div class="col-md-6">
                    <label for="email" class="form-label">邮箱</label>
                    <input type="email" class="form-control" id="email" name="email" required>
                    <div class="invalid-feedback">请输入有效邮箱</div>
                </div>

                <!-- 电话（可选） -->
                <div class="col-md-6">
                    <label for="phone" class="form-label">电话</label>
                    <input type="text" class="form-control" id="phone" name="phone" placeholder="格式：13800138000">
                </div>

                <!-- 角色选择 -->
                <div class="col-md-6">
                    <label for="role" class="form-label">角色</label>
                    <select class="form-select" id="role" name="role" required>
                        <option value="user">普通用户</option>
                        <option value="admin">管理员</option>
                    </select>
                    <div class="invalid-feedback">请选择角色</div>
                </div>

                <!-- 状态开关（默认启用） -->
                <div class="col-md-6">
                    <label class="form-label">状态</label>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" checked>
                        <label class="form-check-label" for="is_active">启用</label>
                    </div>
                </div>

                <!-- 密码设置 -->
                <div class="col-md-6">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" name="password" required>
                    <div class="invalid-feedback">请输入密码（不少于6位）</div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="mt-4 d-flex justify-content-between">
                <button type="submit" class="btn btn-primary">提交</button>
                <a href="{% url 'user_manage' %}" class="btn btn-secondary">返回用户管理</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 表单验证逻辑
    (function () {
        'use strict';
        const forms = document.querySelectorAll('.needs-validation');
        forms.forEach(form => {
            form.addEventListener('submit', (e) => {
                if (!form.checkValidity()) {
                    e.preventDefault();
                    e.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    })();
</script>
{% endblock %}